<template>
  <div class="rent-container">
    <section class="sec-01">
      <div class="sec-01-title">
        <h2>售后服务平台</h2>
        <p>在线可视化的售后服务</p>
      </div>
    </section>

    <section class="sec-02">
      <div class="common__title">
        <div class="common__title--holder">
          <div class="common__title--box">
            <h4>售后服务</h4>
            <div class="line"></div>
          </div>
        </div>
      </div>
      <div class="sec-02__item">
        <p>
          享来享去提供在线服务平台，运营商服务站可以在后台进行添加，车主可以在手机APP或者
          小程序的首页地图上，看到周边的服务站与充电桩，并且可以与服务站进行图文互动，在线
          解决疑难杂症。让新能源的售后在线化可视化，同时做服务站配件库的ERP管理，提升配件
          的流通率。
        </p>
      </div>
    </section>

    <section class="sec-03">
      <div class="sec-03-item">
        <img src="../../assets/img/service/sale-sec03-01.png" alt="">
      </div>
      <div class="sec-03-item middle" >
        <img src="../../assets/img/service/sale-sec-02.png" alt="">
      </div>
      <div class="sec-03-item">
        <img src="../../assets/img/service/sale-sec-03.png" alt="">
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    layout: 'layout',
  }
</script>

<style lang="scss" scoped>
  .rent-container {
    .sec-01 {
      background: url("../../assets/img/service/sale-sec-01.png") no-repeat center center;
      background-size: cover;
      width: 100%;
      height: 600px;
      .sec-01-title {
        width: 500px;
        position: relative;
        text-align: center;
        left: calc(50% - 600px);
        h2 {
          padding-top: 57px;
          color: #FF8A01;
          font-size: 30px;
          line-height: 30px;
        }
        p {
          margin-top: 13px;
          color: #000000;
          font-size: 25px;
          line-height: 25px;
        }
      }

    }

    .sec-02 {
      .common__title {
        overflow: hidden;
        .common__title--holder {
          float: left;
          position: relative;
          left: 50%;
          clear: both;
          .common__title--box {
            position: relative;
            left: -50%;
            padding: 55px 0;
            h4 {
              font-size: 35px;
              line-height: 30px;
              color: #010101;
              font-weight: normal;
              letter-spacing: 4px;
            }
            .line {
              margin-top: 12px;
              width: 80px;
              height: 3px;
              background-color: #FF8A01;
            }
          }
        }
      }
      .sec-02__item {
        margin: 0 auto 40px auto;
        width: 1200px;
        position: relative;
        font-size: 18px;
        padding: 0px 4px 0 4px;
        p {
          line-height: 30px;
        }
      }
    }

    .sec-03 {
      width: 1200px;
      height: 350px;
      margin: 50px auto;
      padding: 0 5px 0 5px;
      .middle{
        margin-left:25px ;
        margin-right:20px;
      }
      .sec-03-item{
        width: 377px;
        height: 100%;
        display: inline-block;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
